<script lang="ts" setup>
import type { UserApi } from '#/api/system/user';

import { computed, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { ElMessage } from 'element-plus';

import { useVbenForm } from '#/adapter/form';
import { createUser, getUser, updateUser } from '#/api/system/user';

import { useUserFormSchema } from '../data';

const emit = defineEmits(['success']);

// 表单数据
const formData = ref<UserApi.User>();
const isEdit = computed(() => Boolean(formData.value?.id));

// 获取动态标题
const getTitle = computed(() => {
  return isEdit.value ? '编辑用户' : '新增用户';
});

// 创建表单
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    formItemClass: 'col-span-2',
    labelWidth: 100,
  },
  layout: 'horizontal',
  schema: useUserFormSchema(false), // 默认新增模式
  showDefaultActions: false,
});

// 创建抽屉
const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }

    drawerApi.lock();

    try {
      const formValues = await formApi.getValues();

      // 处理上传的头像字段转换 - 优先使用 response.url（服务器返回的真实URL），然后使用 file.url
      formValues.userIcon =
        Array.isArray(formValues.userIcon) && formValues.userIcon.length > 0
          ? formValues.userIcon[0]?.response?.url ||
            formValues.userIcon[0]?.url ||
            ''
          : '';

      // 编辑模式下，如果密码为空则不传递密码字段
      if (
        isEdit.value &&
        (!formValues.password || formValues.password.trim() === '')
      ) {
        delete formValues.password;
      }

      if (isEdit.value) {
        // 编辑模式
        await updateUser({
          ...formValues,
          id: formData.value!.id!,
        } as UserApi.User);
        ElMessage.success('编辑成功');
      } else {
        // 新增模式
        await createUser(formValues as UserApi.User);
        ElMessage.success('新增成功');
      }

      await drawerApi.close();
      emit('success');
    } finally {
      drawerApi.unlock();
    }
  },

  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
      return;
    }

    // 加载数据
    const data = drawerApi.getData<UserApi.User>();
    formData.value = data;

    // 根据是否有数据判断是新增还是编辑模式，并更新schema
    const isEditMode = Boolean(data?.id);
    const newSchema = useUserFormSchema(isEditMode);
    formApi.updateSchema(newSchema);

    if (!data) {
      // 新增模式：设置默认值
      await formApi.setValues({
        status: 1,
      });
      return;
    }
    drawerApi.lock();
    try {
      if (data.id) {
        // 编辑模式：加载完整用户数据
        const userData = await getUser(data.id);

        // 将后端的 userIcon 字段转换为 Upload 组件需要的格式
        const userIconUrl = userData.userIcon as string;
        (userData as any).userIcon = userIconUrl
          ? [{ name: '', url: userIconUrl, status: 'success', uid: Date.now() }]
          : [];

        formData.value = userData;

        // 分步骤设置表单数据，避免部门字段被清空
        const { departmentId, ...otherData } = userData;

        // 先设置除部门外的所有数据（包括公司ID，触发部门选项加载）
        await formApi.setValues(otherData);

        // 等待一个事件循环，确保部门选项已加载
        await new Promise((resolve) => setTimeout(resolve, 100));

        // 再设置部门ID
        if (departmentId) {
          await formApi.setFieldValue('departmentId', departmentId);
        }
      }
    } finally {
      drawerApi.unlock();
    }
  },
});
</script>

<template>
  <Drawer :title="getTitle" class="w-1/2">
    <Form class="mx-4" />
  </Drawer>
</template>
